<template>
	<view class="p20">
		<view class="bg-fff radius20 p20">
			<view class="bg-f8f radius12 p20 flex w-max">
				<u-icon name="search" color="#707070" size="32" />
				<view class="flex1 pl20">
					<input type="text" v-model="form.keyword" placeholder="请输入关键词" placeholder-class="color-999 " />
				</view>
			</view>
			<view class="flex mt20">
				<uni-datetime-picker type="datetime" v-model="form.start_time" placeholder="选择开始时间" :border="false">
					<view class="bg-f8f radius12 p20 flex flex1">
						<u-icon name="calendar" color="#707070" size="32" />
						<view class="flex1 pl20">
							<input type="text" v-model="form.start_time" placeholder="开始时间"
								placeholder-class="color-999 " />
						</view>
					</view>
				</uni-datetime-picker>
				<view class="pl10 pr10">至</view>
				<uni-datetime-picker type="datetime" v-model="form.end_time" placeholder="选择开始时间" :border="false">
					<view class="bg-f8f radius12 p20 flex flex1">
						<u-icon name="calendar" color="#707070" size="32" />
						<view class="flex1 pl20">
							<input type="text" v-model="form.end_time" placeholder="结束时间"
								placeholder-class="color-999 " />
						</view>
					</view>
				</uni-datetime-picker>
			</view>
			<u-empty v-if="!list.length" marginTop="50" />
			<view class="pt30 pb30 fs26 color-666" v-for="(item,index) in list" :key="index">
				<view class="flex row-between mt16">
					<view class="">{{item.status_text}}</view>
					<view class="">{{item.create_time}}</view>
				</view>
				<view class="flex row-between mt16">
					<view class="">提现金额：{{item.money}}</view>
					<view class="">手续费：{{item.charge}}</view>
				</view>
				<view class="flex row-between mt16">
					<view class="">{{item.method}}</view>
					<view class="">到账金额：{{item.cash}}</view>
				</view>
				<view class="flex row-between mt16">
					<view class="">订单号：{{item.sn}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					keyword: '',
					start_time: '',
					end_time: '',
				},
				list: '',
			};
		},
		watch: {
			'form.keyword'(e) {
				this.$u.debounce(this.getList, 500)
			},
			'form.start_time'(e) {
				this.getList()
			},
			'form.end_time'(e) {
				this.getList()
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
					...this.form,
				}
				this.$request('/master/withdraw/withdrawList', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
